/**
 * Dear programmer:
 * When I wrote this code, only god and I knew how it worked.
 * Now, only god knows it!
 *
 * @author: Pegasus  Date: 2018-11-29 Time: 23:30
 *
 * 退房检查高峰时段
 */

import React, {Component} from 'react';
import {
  StyleSheet,
  SafeAreaView,
  ScrollView,
  View,
  Text
} from 'react-native';
import {COLOR_THEME, FONT_COLOR_TITLE, FONT_SIZE_14} from "../../../../constant/PHColors"

export default class HoursOfCheckOutScreen extends Component {
  static navigationOptions = {
    title: '退房检查高峰时段'
  }

  render() {
    return (
      <SafeAreaView style={styles.body}>
        <ScrollView style={styles.body}>
          {
            this.props.navigation.state.params.data.map((item, index) => {
              return this._render(item, index)
            })
          }
        </ScrollView>
      </SafeAreaView>
    )
  }

  _render(item, index) {
    return (
      <View key={index} style={styles.cellHeight}>
        {/* 时间 */}
        <View style={styles.cellLeft}>
          <Text style={styles.cellLeftText}>
            {index}点
          </Text>
        </View>

        {/* */}
        <View style={styles.cellCenter}>
          <View style={{height: 20, width: item * 10, backgroundColor: COLOR_THEME}}/>
        </View>

        {/* 单数 */}
        <View style={styles.cellRight}>
          <Text style={styles.cellRightText}>
            {item}单
          </Text>
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({

  body: {
    flex: 1
  },

  cellHeight: {
    height: 44,
    flexDirection: 'row',
    marginLeft: 15,
    marginRight: 15
  },

  cellLeft: {
    width: 60,
    justifyContent: 'center',
    alignItems: 'flex-start'
  },

  cellLeftText: {
    fontSize: FONT_SIZE_14,
    color: FONT_COLOR_TITLE
  },

  cellCenter: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'flex-start'
  },

  cellRight: {
    width: 60,
    justifyContent: 'center',
    alignItems: 'center'
  },

  cellRightText: {
    fontSize: FONT_SIZE_14,
    color: COLOR_THEME
  }
})